
<div class="page-header position-relative">
    <h1>
        Gallery
        <small>
            <i class="icon-double-angle-right"></i>
            responsive photo gallery using colorbox
        </small>
    </h1>
</div><!--/.page-header-->

<div class="row-fluid">
    <!--PAGE CONTENT BEGINS HERE-->

    <div class="row-fluid">
        <ul class="ace-thumbnails">
            <li>
                <a href="assets/images/gallery/image-1.jpg" title="Photo Title" data-rel="colorbox">
                    <img alt="150x150" src="assets/images/gallery/thumb-1.jpg" />
                    <div class="tags">
                        <span class="label label-info">breakfast</span>
                        <span class="label label-important">fruits</span>
                        <span class="label label-success">toast</span>
                        <span class="label label-warning arrowed-in">diet</span>
                    </div>
                </a>

                <div class="tools">
                    <a href="#">
                        <i class="icon-link"></i>
                    </a>

                    <a href="#">
                        <i class="icon-paper-clip"></i>
                    </a>

                    <a href="#">
                        <i class="icon-pencil"></i>
                    </a>

                    <a href="#">
                        <i class="icon-remove red"></i>
                    </a>
                </div>
            </li>

            <li>
                <a href="assets/images/gallery/image-2.jpg" data-rel="colorbox">
                    <img alt="150x150" src="assets/images/gallery/thumb-2.jpg" />
                    <div class="text">
                        <div class="inner">Sample Caption on Hover</div>
                    </div>
                </a>
            </li>

            <li>
                <a href="assets/images/gallery/image-3.jpg" data-rel="colorbox">
                    <img alt="150x150" src="assets/images/gallery/thumb-3.jpg" />
                    <div class="text">
                        <div class="inner">Sample Caption on Hover</div>
                    </div>
                </a>

                <div class="tools tools-bottom">
                    <a href="#">
                        <i class="icon-link"></i>
                    </a>

                    <a href="#">
                        <i class="icon-paper-clip"></i>
                    </a>

                    <a href="#">
                        <i class="icon-pencil"></i>
                    </a>

                    <a href="#">
                        <i class="icon-remove red"></i>
                    </a>
                </div>
            </li>

            <li>
                <a href="assets/images/gallery/image-4.jpg" data-rel="colorbox">
                    <img alt="150x150" src="assets/images/gallery/thumb-4.jpg" />
                    <div class="tags">
                        <span class="label label-info arrowed">fountain</span>
                        <span class="label label-important">recreation</span>
                    </div>
                </a>

                <div class="tools tools-top">
                    <a href="#">
                        <i class="icon-link"></i>
                    </a>

                    <a href="#">
                        <i class="icon-paper-clip"></i>
                    </a>

                    <a href="#">
                        <i class="icon-pencil"></i>
                    </a>

                    <a href="#">
                        <i class="icon-remove red"></i>
                    </a>
                </div>
            </li>

            <li>
                <div>
                    <img alt="150x150" src="assets/images/gallery/thumb-5.jpg" />
                    <div class="text">
                        <div class="inner">
                            <span>Some Title!</span>

                            <br />
                            <a href="assets/images/gallery/image-5.jpg" data-rel="colorbox">
                                <i class="icon-zoom-in"></i>
                            </a>

                            <a href="#">
                                <i class="icon-user"></i>
                            </a>

                            <a href="#">
                                <i class="icon-share-alt"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </li>

            <li>
                <a href="assets/images/gallery/image-6.jpg" data-rel="colorbox">
                    <img alt="150x150" src="assets/images/gallery/thumb-6.jpg" />
                </a>

                <div class="tools tools-right">
                    <a href="#">
                        <i class="icon-link"></i>
                    </a>

                    <a href="#">
                        <i class="icon-paper-clip"></i>
                    </a>

                    <a href="#">
                        <i class="icon-pencil"></i>
                    </a>

                    <a href="#">
                        <i class="icon-remove red"></i>
                    </a>
                </div>
            </li>

            <li>
                <a href="assets/images/gallery/image-1.jpg" data-rel="colorbox">
                    <img alt="150x150" src="assets/images/gallery/thumb-1.jpg" />
                </a>

                <div class="tools">
                    <a href="#">
                        <i class="icon-link"></i>
                    </a>

                    <a href="#">
                        <i class="icon-paper-clip"></i>
                    </a>

                    <a href="#">
                        <i class="icon-pencil"></i>
                    </a>

                    <a href="#">
                        <i class="icon-remove red"></i>
                    </a>
                </div>
            </li>

            <li>
                <a href="assets/images/gallery/image-2.jpg" data-rel="colorbox">
                    <img alt="150x150" src="assets/images/gallery/thumb-2.jpg" />
                </a>

                <div class="tools tools-top">
                    <a href="#">
                        <i class="icon-link"></i>
                    </a>

                    <a href="#">
                        <i class="icon-paper-clip"></i>
                    </a>

                    <a href="#">
                        <i class="icon-pencil"></i>
                    </a>

                    <a href="#">
                        <i class="icon-remove red"></i>
                    </a>
                </div>
            </li>
        </ul>
    </div>

    <!--PAGE CONTENT ENDS HERE-->
</div><!--/row-->